<template>
	<view class="mall">
		<view style="position: fixed;z-index: 10;width: 100%;">
			<view class="mall_search">
				<input placeholder="搜索商品" disabled @click="gosearch"
					placeholder-style="color:rgba(45, 49, 48,0.5);font-size:28rpx;"></input>
			</view>
			<view class="mall-type">
				<view @click="orderClick(0)" :class="ordersIndex==0?'on':''">综合</view>
				<view @click="orderClick(1)" :class="ordersIndex==1?'on':''" class="list-img">
					<text>销量</text>
					<view style="margin-left: 4rpx;">
						<view class="trangle">
							<view class="trangle-top"
								:class="order_num_type==0||order_num_type==2?'trangle-top-disable':''"></view>
							<view class="trangle-bottom"
								:class="order_num_type==0||order_num_type==1?'trangle-bottom-disable':''"></view>
							<!-- <image mode="widthFix" src="../../static/img/mall/icon-top.png" class="img" style="padding-bottom: 8rpx;" v-if="order_num_type==0||order_num_type==2"></image>
					<image mode="widthFix"  src="../../static/img/mall/icon-top1.png" class="img" style="padding-bottom: 10rpx;" v-if="order_num_type==1 && ordersIndex == 1"></image>
					<image mode="widthFix" src="../../static/img/mall/icon-bottom.png" class="img"  v-if="order_num_type==0||order_num_type==1"> </image>
					<image mode="widthFix" src="../../static/img/mall/icon-bottom1.png" class="img"  v-if="order_num_type==2 && ordersIndex == 1"> </image> -->
						</view>
					</view>
				</view>
				<view @click="orderClick(2)" :class="ordersIndex==2?'on':''" class="list-img">
					<text>价格</text>
					<view style="margin-left: 4rpx;">
						<view class="trangle">
							<view class="trangle-top" :class="priceType==0||priceType==2?'trangle-top-disable':''">
							</view>
							<view class="trangle-bottom"
								:class="priceType==0||priceType==1?'trangle-bottom-disable':''"></view>
							<!-- <image src="../../static/img/mall/icon-top.png" class="img" style="padding-bottom: 8rpx;" v-if="priceType==0||priceType==2"></image>
					<image src="../../static/img/mall/icon-top1.png"  class="img" style="padding-bottom: 10rpx;" v-if="priceType==1"></image>
					<image src="../../static/img/mall/icon-bottom.png"  class="img" v-if="priceType==0||priceType==1"> </image>
					<image src="../../static/img/mall/icon-bottom1.png"  class="img" v-if="priceType==2"> </image> -->
						</view>
					</view>
				</view>
				<navigator style="width: 19%;text-align: right;" url="/pages/mall/Classify" hover-class="none"
					class="menuItem">
					<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/menuItem.png" mode=""></image>
				</navigator>
			</view>
		</view>
		<view style="min-height: 185rpx;"></view>
		<view class="wares-card-container">
			<block v-for="(item,index) in MallList" :key="index">
				<navigator :url="'/pages/mall/productDetail?id='+item.id" hover-class="none">
					<view class="goods">
						<image
							style="background-color: #eaeaea;width: 100%;height:346rpx;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;"
							:src="item.coverAbsolute"></image>
						<view class="good-info">{{item.name}}</view>
						<view class="price">
							<text style="font-weight: 600;font-size: 36rpx; color: #FC5252;"><text
									style="font-size: 24rpx;">￥</text>{{item.goodsMinPrice}}</text>
						</view>
					</view>
				</navigator>
			</block>
			<u-loadmore v-if="more&&status!=='hidden'" :status="status" loadingText="加载中" loadmoreText="上拉加载更多"
				nomoreText="已经到底啦～" fontSize=28 iconSize=30 marginTop=20 marginBottom=30></u-loadmore>
		</view>
		<view v-if="MallList.length == 0" style="display: flex;flex-direction: column;align-items: center;width: 100%;">
			<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
				style="margin-top: 100rpx;width: 316rpx;height: 316rpx;"></image>
			<label style="margin-top: 20rpx;color: #272A37;font-size: 32rpx;">未搜索到相关数据</label>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils.js';

export default {
    data() {
        return {
            optionsParams: {},
            priceIndex: 0,
            ordersIndex: 0,
            selectText: '',
            MallList: [],
            pageNum: 1,
            pageSize: 20,
            isloading: false,
            total: 0,
            order_num_type: 0,
            priceType: 0,
            orderByColumn: 'order_num desc,create_time',
            isAsc: 'ascending',
            secondCategoryId: '',
            status: 'loadmore',
            more: false,
        };
    },
    onLoad(options) {
        this.optionsParams = options;
        this.getMall(true);
    },
    onUnload() {
        this.$store.commit('cleanCategoryIdList');
        this.$store.commit('cleanGoodsIdList');
    },
    onPullDownRefresh() {
        this.secondCategoryId = ''; //清除分类
        this.getMall(true);
    },
    onShow() {
        uni.$once('mallCategory', (item) => {
            this.secondCategoryId = item.id;
            this.getMall(true);
        });
    },
    onTabItemTap() {
        this.secondCategoryId = '';
        this.getMall(true);
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = 'loading';
        this.pageNum = ++this.pageNum;
        this.getMall(false);
    },
    methods: {
        getMall(isFresh) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.status = 'hidden';
            } else {
                this.status = 'loadmore';
            }
            let data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                secondCategoryId: this.secondCategoryId,
                orderByColumn: this.orderByColumn,
                // isAsc:this.isAsc
            };
            if (this.optionsParams.type === '1') {
                data.categoryIdList = this.categoryIdList;
            }
            if (this.optionsParams.type === '2') {
                data.goodsIdList = this.goodsIdList;
            }
            this.request.httpTokenJsonRequest('/mp-api/wx/goods/list', data, 'POST', false).then((res) => {
                uni.stopPullDownRefresh();

                if (res.code == 0) {
                    if (res.data.list && isFresh) {
                        this.MallList = res.data.list;
                    } else {
                        this.MallList = utils.filterRepetition([...this.MallList, ...res.data.list]);
                    }
                    if (res.data.total > this.MallList.length) {
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                } else {
                    this.more = false;
                    this.status = 'nomore';
                }
            });
        },
        orderClick(e) {
            if (e == 1) {
                this.MallList = [];
                this.priceType = 0;
                if (this.order_num_type != 1) {
                    this.orderByColumn = 'actual_sales asc,create_time';
                    this.order_num_type = 1;
                    this.isAsc = 'ascending';
                    this.getMall(true);
                } else {
                    this.orderByColumn = 'actual_sales desc,create_time';
                    this.order_num_type = 2;
                    this.isAsc = 'descending';
                    this.getMall(true);
                }
            } else if (e == 2) {
                this.MallList = [];
                this.order_num_type = 0;
                if (this.priceType != 1) {
                    this.orderByColumn = 'goods_min_price asc,create_time';
                    this.priceType = 1;
                    this.isAsc = 'ascending';
                    this.getMall(true);
                } else {
                    this.priceType = 2;
                    this.orderByColumn = 'goods_min_price desc,create_time';
                    this.isAsc = 'descending';
                    this.getMall(true);
                }
            } else if (e == 0) {
                this.MallList = [];
                this.priceType = 0;
                this.order_num_type = 0;
                this.orderByColumn = 'order_num desc,create_time';
                this.isAsc = 'ascending';
                this.getMall(true);
            }
            this.ordersIndex = e;
        },
        gosearch() {
            uni.navigateTo({
                url: '/packageMall/pages/searchMall/searchMall',
            });
        },
    },
    computed: {
        goodsIdList() {
            return this.$store.getters['getGoodsIdList'];
        },
        categoryIdList() {
            return this.$store.getters['getCategoryIdList'];
        },
    },
};
</script>
<style scoped>
.trangle {
    height: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.trangle-top {
    width: 0px;
    height: 0px;
    border-bottom: 4px solid #009977;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.trangle-top-disable {
    border-bottom: 4px solid #aaa;
}

.trangle-bottom {
    width: 0px;
    height: 0px;
    border-top: 4px solid #009977;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.trangle-bottom-disable {
    border-top: 4px solid #aaa;
}
</style>
